<template>
  <div class="order_wrap">
    <!-- 点餐步骤 -->
    <el-steps :active="active" simple>
      <el-step title="选择餐桌" icon="iconfont icon-REXcanzhuo_"></el-step>
      <el-step title="开始点餐" icon="iconfont icon-jilu"></el-step>
      <el-step title="完成点餐" icon="iconfont icon-huiyuan"></el-step>
    </el-steps>
    <div class="choice_table" v-show="active==1">
      <!-- 餐桌选择 -->
      <div class="table">

        <!-- 点餐状态 -->
        <div class="table_list" v-for="(v,i) in tableList" :key="i">

          <!-- 未点餐 -->
          <div class="list_type_one" v-show="v.food_table_action==0">
            <div class="table_num">
              {{v.food_table_number}}
            </div>
            <p>{{v.food_table_seat}}人桌</p>
            <button @click="goOrder(v)">开始点餐</button>
          </div>

          <!-- 已点餐 -->
          <div class="list_type_two" v-show="v.food_table_action==1" :class="v.food_table_action==1?'is_active':''">
            <div class="table_num">
              {{v.tableId}}
            </div>
            <p>人数:{{dinnerNum}}/{{v.food_table_seat}}</p>
            <button>结账</button>
            <button @click="goOrder">加菜</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 开始点餐 -->
    <div class="orderFood clearFix" v-show="active==2">
      <div class="dinner_num">
        <el-input v-model="dinnerNum" placeholder="请确认就餐人数"></el-input>
        <el-button type="primary">确认就餐人数</el-button>
      </div>

      <!-- 菜单list -->
      <div class="menuList clearFix">
        <div class="menu" v-for="(v,i) in foodList" :key="i">
          <div class="img">
            <img :src="'<%= baseURL %>'+v.food_img" alt="">
          </div>
          <p>{{v.food_name}}</p>
          <p>价格:￥{{v.food_price}}</p>
          <el-input-number v-model="v.food_action" @change="handleChange" :min="0" :max="10"></el-input-number>
        </div>
      </div>
    </div>
  </div>
</template>
<style src="../style/order.css">
</style>
<script>
// import tableList from "../utils/tableList";
export default {
  data () {
    return {
      // 餐桌数据
      tableList: '',
      active: 1,
      // 就餐人数
      dinnerNum: '',
      // 点单数量
      foodNum: {
        maoduNum: 0,
        anchunNum: 0,
        feiniuNum: 0,
        yachangNum: 0,
        sucaiNum: 0,
        fudaiNum: 0
      },

      // 菜品数量
      foodList: [],
      // 当前桌子
      nowTable: [

      ]
    };
  },
  methods: {
    goOrder (item) {
      item.power = 1;
      this.active = 2
      this.$order.order(item.food_table_number).then(res => {
        if (res.data.code == 200) {
          console.log(res);
        }
      })
      this.getFood()
    },
    handleChange (value) {
      this.num = value
    },


    // ----------------------api部分------------------------------------
    // 获取餐桌
    getTable () {
      this.$order.getTable().then(res => {
        if (res.data.code == 200) {
          this.tableList = res.data.data
        }
      })
    },
    // 获取菜品
    getFood () {
      this.$order.getFood().then(res => {
        if (res.data.code == 200) {
          this.foodList = res.data.data
        }
      })
    },
    // 点餐
    order () {

    }
    // 确认就餐人数
    // confirmNum(){

    // }
  },
  created () {

  },
  mounted () {
    this.getTable()

  },
  computed: {

  }
};
</script>

<style scoped lang="less">
</style>
